<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList"
		:loading-more-custom-style="{ paddingBottom: 'env(safe-area-inset-bottom)' }">
		<template #top>
			<view class="zpagin_top">
				<nav-bar :iconLeft="true" />
				<view class="search">
					<custom-search v-model="queryParams.search" @search="refreshList" placeholder="请输入报价单号" />
					<uni-data-select style="z-index: 50;" placeholder="请选择分类" v-model="queryParams.classify__id"
						:localdata="classify_list" @change="refreshList" />
				</view>
				<dui-float-ball :pathUrl="`${pageUrl}/compile`" v-if="$hasPerm(['20101'])" />
			</view>
		</template>
		<up-swipe-action>
			<up-swipe-action-item v-for="item in dataList" :key="item.id" :item-data="item"
				:name="JSON.stringify(swipeActPer(options, item.status_display)) + '&' + item.id + '&' + item.code + '&' + item.name"
				:options="swipeActPer(options, item.status_display)"
				:disabled="swipeActPer(options, item.status_display, 'disabled')" @click="action">
				<uni-card margin="0" spacing="0" @click="goDetail(item, pageUrl, '20105')">
					<template v-slot:title>
						<uni-list>
							<uni-list-item :title="item.name" :thumb="item.file_url" :note="item.code" thumbSize="lg">
								<template v-slot:footer>
									<view style="display: flex; align-items: center;">
										<up-tag size="mini" :text="status_list[item.if_open].text" plain plainFill
											:type="status_list[item.if_open].type" style="display: inline-block;" />
										<switch style="transform:scale(0.7)" :checked="Boolean(item.if_open)"
											@change="checkedChange($event, item.id)" v-if="$hasPerm(['20106'])" />
									</view>
								</template>
							</uni-list-item>
						</uni-list>
					</template>
					<view>规格：{{ item.specification }}</view>
					<view class="con">
						<view class="ctent">货品分类：{{ item.classify_name }}</view>
						<view class="ctent">工序价：{{ item.total_process_price }}</view>
					</view>
					<view style="color:blue;text-decoration: underline;padding: 10rpx 0;display:inline-block;"
						@click.stop="allCostAct(item)">
						成本价(工序+采购)：{{
							item.all_cost }}</view>
					<view class="con">
						<view class="ctent">销售价：{{ item.sales_price }}</view>
						<view class="ctent">销售提成：{{ item.royalties | '' }}%</view>
					</view>
					<view class="con" style="align-items: normal;">
						<view class="ctent" style="flex: none;">备注：</view>
						<view class="ctent">{{ item.desc }}</view>
					</view>
				</uni-card>
			</up-swipe-action-item>
		</up-swipe-action>
		<template #bottom>
			<custom-popup :popupShow="allCostPopup.bom_popupShow" mode="center" :title="`【${allCostPopup.proName}】成本价`"
				width="96%" height="45%" class="car-popup-custom" @close="allCostPopup.bom_popupShow = false">
				<z-paging :fixed="false" :refresher-enabled="false" :loading-more-enabled="false">
					<template #top>
						<view class="ta_ble">
							<view style="flex: 2.5;">名称(类型)</view>
							<view>单价</view>
							<view>数量</view>
							<view style="flex: 1.2;color:red">合:{{ allCostPopup.bomProObj.all_price }}</view>
						</view>
					</template>
					<view class="ta_ble" v-for="(item, index) in allCostPopup.bomProObj.bomProList" :key="index">
						<view style="flex: 2.5;">{{ item.name }}</view>
						<view>{{ item.unit_main_price }}</view>
						<view>{{ item.num }}</view>
						<view style="flex: 1.2;color:red">{{ item.all_price }}</view>
					</view>
				</z-paging>
			</custom-popup>
		</template>
	</z-paging>
</template>
<script setup>

import daProductApi from '../../../api/dataa/da_product'
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { goDetail, swipeActPer } from '@/utils/permission'

//作用于新增或编辑后刷新页面数据
uni.$bus.useBusOn('da_product', refreshList);

//页面header标题

onLoad((option) => {
	
	get_classify_list()
})

//滑动单元格按钮
const options = [
	{
		text: '修改',
		per: '20102',
		style: {
			backgroundColor: '#0081ff',
		}
	}, {
		text: '删除',
		per: '20103',
		style: {
			backgroundColor: '#f56c6c'
		}
	}
];
//页面跳转路径
const pageUrl = '/views/dataa/da_product';

//tag标签状态
const status_list = {
	0: {
		text: '禁用',
		type: 'error'
	},
	1: {
		text: '启用',
		type: 'success'
	}
}

//查询参数
const queryParams = reactive({
	search: '',
	classify__id: '',
});

//获取paging实例
const paging = ref(null)
const dataList = ref([])
//列表数据方法
function queryList(pageNo, pageSize) {
	const params = {
		page: pageNo,
		page_size: pageSize,
		...queryParams
	}
	daProductApi.get_product(params).then((res) => {
		paging.value?.complete(res.results);
	})
}

//switch操作
function checkedChange(e, id) {
	const if_open = e.detail.value ? 1 : 0
	daProductApi.patch_product({ if_open }, id).then(res => {
		uni.$u.toast(if_open ? '启用成功' : '禁用成功')
		setTimeout(() => {
			refreshList();
		}, 500)
	})
};

//bom弹窗数据
const allCostPopup = reactive({
	proName: '',
	bom_popupShow: false,
	bomProObj: {
		bomProList: [],
		all_price: '0'
	},
});
//bom弹窗方法
function allCostAct(item) {
	allCostPopup.proName = item.name
	daProductApi.product_cost_detail({ product_id: item.id }).then(res => {
		allCostPopup.bomProObj.bomProList = [...res.process_list, ...res.bom_list]
		allCostPopup.bomProObj.all_price = allCostPopup.bomProObj.bomProList.reduce((acc, item) => {
			return acc += item.all_price
		}, 0)
		allCostPopup.bom_popupShow = true
	})
};

//产品分类
const classify_list = ref([]);
function get_classify_list() {
	daProductApi.get_product_classify({ page: 1, page_size: 99999, if_open: 1 }).then(res => {
		classify_list.value = res.results.map(v => ({
			text: v.name,
			value: v.id
		}))
	})
};

//滑动操作按钮
function action(v) {
	const options = JSON.parse(v.name.split("&")[0])
	const id = v.name.split("&")[1]
	const code = v.name.split("&")[2]
	const name = v.name.split("&")[3]
	const index = v.index
	if (options[index].text == '修改') {
		uni.navigateTo({
			url: `${pageUrl}/compile?type=edit&id=${id}`
		})
	}
	if (options[index].text == '删除') {
		delete_type(id, code, name)
	}
};

//删除操作
function delete_type(id, code, name) {
	uni.showModal({
		title: '提示',
		content: `确认要删除编码为【${code}】的【${name}】吗？`,
		success: (res) => {
			if (res.confirm) {
				daProductApi.delete_product(id).then((res) => {
					uni.$u.toast('删除成功')
					setTimeout(() => {
						refreshList();
					}, 500)
				})
			}
		}
	});
};

//刷新列表数据方法
function refreshList() {
	paging.value?.reload()
};
</script>

<style lang="scss">
.ta_ble {
	display: flex;
	justify-content: space-around;
	border-bottom: 1px solid #dfe6ec;
	padding: 20rpx 10rpx;
	background-color: #fff;
	font-size: 14px;

	view {
		flex: 1;
	}
}
</style>